<template>
  <div>
    <!-- <div :class="{ asd: true }">app</div> -->
    <!-- <div :class="['asd','qwe']">app</div> -->
    <!-- <input type="text" v-model="msg" />
    {{ fun() }}---{{ qwe }}
    {{ fun() }}---{{ qwe }} -->
    <!-- <HelloWorld :msg="msg" @er="fun" /> -->

    <!-- <input type="checkbox" name="" id="" value="a" v-model="arr" />吃
    <input type="checkbox" name="" id="" value="b" v-model="arr" />喝
    <input type="checkbox" name="" id="" value="c" v-model="arr" />玩
    <input type="checkbox" name="" id="" value="d" v-model="arr" />乐 -----{{arr}} -->
    <!-- <HelloWorld>
      <template slot="wx">
        李峰
      </template>
      <template v-slot="qwe">
        {{ qwe }}
        李毅
      </template>
    </HelloWorld> -->
    <!-- <input type="text" v-fouce /> -->
    <!-- {{ "asd" | filter }} -->

    <!-- <div ref="asd"></div> -->

    <!-- <router-link to="/home/a">about</router-link> -->
    <!-- <button @click="btn">button</button>
    <router-view></router-view> -->

    <!-- {{ $store.state.tow.num }} -->
    <!-- {{num}} -->
    <!-- {{test}} -->
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
import Mixin from "./components/mixin/mixin";
import { mapState, mapActions, mapGetters } from "vuex";
// const { mapState, mapActions } = createNamespacedHelpers('tow')

export default {
  data() {
    return {
      msg: "李峰",
      arr: [1, 5, 3],
      newObj: {
        a: 1,
        b: 2,
      },
    };
  },
  mounted() {
    this.setNum("张宁");
    // console.log(this.msg);
    // console.log(this.$refs.asd);
    // this.arr.push(122)
    // this.arr.pop(1)
    // this.arr.shift(1)
    // this.arr.unshift(1)
    // this.arr.splice(1)
    // this.arr.sort()
    // console.log(this.arr)
  },
  // watch: {
  //   "newObj.a": {
  //     handler(newVal, oldVal) {
  //       console.log(newVal);
  //       console.log(oldVal);
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  /* newObj: {
      handler(newVal, oldVal) {
        console.log(newVal);
        console.log(oldVal);
      },
      deep: true,
      immediate: true,
    }, */
  /* num(newVal, oldVal) {
      console.log(newVal);
      console.log(oldVal);
    }, */
  // },
  methods: {
    ...mapActions("tow", ["setNum"]),
    fun(value) {
      console.log(value);
    },
    btn() {
      // this.$router.push({ path: "/home", query: { test: 111 } });
      this.$router.push({ name: "Home", params: { test: 111 } });
    },
  },
  computed: {
    ...mapState("tow", ["num"]),
    ...mapGetters("tow", ["test"]),
    qwe() {
      console.log(this.msg);
    },
  },
  // directives: {
  //   fouce: {
  //     inserted(el) {
  //       el.focus();
  //     },
  //     update(el, binding, oldValue) {
  //       console.log(binding);
  //     },
  //     bind() {
  //       console.log(1);
  //     },
  //     unbind() {
  //       console.log(2);
  //     },
  //   },
  // },
  // beforeCreate() {
  //   // console.log(this.num);//undefinde
  //   console.log("beforeCreate");
  // },
  // created() {
  //   // console.log(this.num);
  //   console.log("created");
  // },
  // beforeMount() {
  //   // console.log(this.num);
  //   console.log("beforeMount");
  // },
  // //更新调用
  // beforeUpdate() {
  //   // console.log(this.num);
  //   console.log("beforeUpdate");
  // },
  // updated() {
  //   console.log("Update");
  // },
  // filters: {
  //   filter(val) {
  //     return val.toUpperCase();
  //     console.log(val);
  //   },
  // },
  components: {
    HelloWorld,
  },
  // mixins: [
  //   {
  //     data() {
  //       return {
  //         msg: "李毅",
  //       };
  //     },
  //     mounted() {
  //       console.log(this.msg);
  //     },
  //   },
  // ],
  // mixins: [Mixin],
};
</script>

<style scoped></style>
